<template>
    <h1>修改用户信息</h1>

    <table>
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" v-model="User.U_Name">
            </td>
        </tr>

        <tr>
            <td>密码</td>
            <td>
                <input type="text" v-model="User.U_Pwd">
            </td>
        </tr>


        <tr>
            <td colspan="2">
                <input type="button" value="修改" @click="Update" >
            </td>
        </tr>

    </table>

</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';

const User = ref({
    U_Name:'',
    U_Pwd:'',
})

const route = useRoute()
console.log(route.params.UId);
//反填功能
onMounted(()=>{
    axios({
        url:'http://localhost:62058/api/Login/SearUser',
        method:'get',
        params:{
            UId:route.params.UId
        }
    })
    .then(function(res){
        console.log(res.data);
        User.value = res.data;
    })
    .catch(function(err){
        console.log(err);
    })
})
//修改功能
const Update = ()=>{

    if(User.value.U_Name==''){
        alert('请输入用户名');
        return;
    }

    if(User.value.U_Pwd==''){
        alert('请输入密码');
        return;
    }

    if(User.value.U_Pwd.length<6){
        alert('密码长度不能小于6位');
        return;
    }


    axios({
        url:'http://localhost:62058/api/Login/UpdateUser',
        method:'get',
        params:{
            UId:route.params.UId,
            Name:User.value.U_Name,
            Pwd:User.value.U_Pwd,
        },
    })
    .then(function(res){
        console.log(res.data);
        if(res.data>0){
            alert('修改成功');
        }
        else if(res.data=-1){
            alert('用户名已重复');
        }
        else{
            alert('修改失败');
        }
    })
    .catch(function(err){
        console.log(err);
})

}
</script>